<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<title>房屋信息图像管理</title>
<link th:replace="common/header"/>
<link rel="stylesheet" th:href="@{/css/dropzone.css}" />
<script th:src="@{/js/dropzone/dropzone.js}"></script>
<script>
	function deleteImage(id){
		$("#tipName").text("确定删除吗？");
		$("#tipButton").click(function(){
			$.ajax({
				url: '/system/houseImage/' + id + '/delete',
				type: "post",
				dataType: "text",
				success: function (data) {
					if(data == "ok"){
						$("#" + id).remove();
						Cancel();
					}
				}
			});
		});
		showDialog('layer');
	}
</script>
</head>
<body class="no-skin">
	<div th:replace="common/top"/>
	<div class="main-container ace-save-state" id="main-container">
		<div th:replace="common/menu"/>
		<div class="main-content">
			<div class="main-content-inner">
				<div th:replace="common/title"/>
				<div class="page-content">
					<div th:replace="common/skin"/>
					<div class="row">
						<div class="col-xs-12">
							<!-- PAGE CONTENT BEGINS -->
							<div class="page-content">
								<div class="page-header">
									<h1>
										上传房屋图像
										<small>
											<i class="icon-double-angle-right"></i>
											您可以随意拖放图像到对应的区域内
										</small>
									</h1>
								</div><!-- /.page-header -->
								<div class="row-fluid">
									<div class="span12">
										<div>
											<ul class="ace-thumbnails clearfix">
												<li th:each="image : ${list}">
													<a th:href="@{'/' + ${image.houseImg}}" data-rel="colorbox">
														<img alt="" th:attr="id=${image.id}" th:src="@{'/' + ${image.houseImg}}" style="max-height: 150px; max-width: 150px;" />
														<div class="text">
															<div class="inner">点击查看大图</div>
														</div>
													</a>
													<div class="tools tools-bottom">
														<a href="javascript:void(0);" th:onclick="'deleteImage(\'' + ${image.id} + '\')'">
															<i class="ace-icon fa fa-times red"></i>
														</a>
													</div>
												</li>
											</ul>
										</div>
									</div>
								</div>
								
								<div class="row-fluid" >
									<div class="span12">
										<!-- PAGE CONTENT BEGINS -->
										<div id="dropzone">
											<input type="hidden" name="id" id="id" th:value="${id}"/>
											<input type="hidden" name="path" id="path" th:value="${path}"/>
											<form th:action="@{'/houseImage/upload'}" action="#"  method="POST" class="dropzone" enctype="multipart/form-data" name="form">
												<div class="fallback">
													<input name="file" type="file" multiple="" />
												</div>
											</form>
											<font style="color:red"><p th:text="${msg}">Name Error</p>&nbsp;</font>
											<a shiro:hasPermission="/houseImage/upload" class="btn btn-primary" th:href="@{'/houseImage/' + ${path} + '/' + ${id} + '/uploadsubmit'}"><i class="fa fa-floppy-o" aria-hidden="true"></i>提交</a>
											<a class="btn" href="getall" th:href="@{'/' + ${path} + '/getall'}"><i class="fa fa-reply" aria-hidden="true"></i>返回</a>
										</div><!-- PAGE CONTENT ENDS -->
									</div><!-- /.col -->
								</div><!-- /.row -->
							</div><!-- /.page-content -->
							<!-- PAGE CONTENT ENDS -->
						</div><!-- /.col -->
					</div><!-- /.row -->
				</div><!-- /.page-content -->
			</div>
		</div><!-- /.main-content -->
		<div th:replace="common/footer"/>
	</div><!-- /.main-container -->
	<div th:replace="common/buttom"/>
	<link rel="stylesheet" th:href="@{/css/colorbox.min.css}"/>
	<script th:src="@{/js/colorbox/jquery.colorbox.min.js}"></script>
	<script th:src="@{/js/colorbox/colorbox.js}"></script>
</body>
</html>
